<template>
	<view class="j-message">
		<template v-if="messageList.length">
			<view class="j-message-row" v-for="(item, index) in messageList" :key="index" @click="toMessageDetails(item)">
				<view class="j-message-title">
					<view class="title">
						<u-icon top="10" :name="item.msgType == 1 ? 'volume-up-fill' : 'chat-fill'" color="#909399" size="42"></u-icon>
						<view class="text">{{ item.msgTitle }}</view>
						<view class="j-w-read" v-if="!item.isRead"></view>
					</view>
					<view class="time">{{item.createTime}}</view>
				</view>
			</view>
			<u-loadmore :status="loadStatus" bgColor="#f2f2f2" :margin-top="20"></u-loadmore>
		</template>
		<template v-else>
			<u-empty></u-empty>
		</template>
	</view>
</template>

<script>
export default {
	data() {
		return {
			loadStatus: 'loadmore',
			params: {
				page: 0,
				rows: 10
			},
			messageList: []
		};
	},
	onLoad() {
		this.pullUp();
	},
	onPullDownRefresh() {
		this.dropDown();
	},
	onReachBottom() {
		this.pullUp();
	},
	methods: {
		// 下拉刷新
		dropDown() {
			// 修改当前view的数据
			this.params.page = 1;
			// 加载下拉刷新的数据
			this.postFindMessageList('down');
		},
		// 上拉加载
		pullUp() {
			// 增加页数
			this.params.page++;
			// 请求获取数据
			this.postFindMessageList('up');
		},
		// 消息-查询列表
		postFindMessageList(type) {
			this.$u.api
				.postFindMessageList(this.params)
				.then(res => {
					console.log(res, '[消息列表页-查询会员商品订单列表]');
					uni.stopPullDownRefresh();

					// 如果是上拉加载
					if (type == 'up') {
						// 判断分页
						if (this.params.page <= res.data.totalPage) {
							this.messageList.push(...res.data.rows);
							this.loadStatus = 'loading';

							// 如果数量小于页容量，显示没有更多数据
							if (res.data.rows.length < this.params.rows) {
								this.loadStatus = 'nomore';
							}
						} else {
							this.params.page = res.data.totalPage;
							this.loadStatus = 'nomore';
						}
					}

					// 如果是下拉刷新
					if (type == 'down') {
						// 将数据
						this.messageList.push(...res.data.rows);
						this.messageList.splice(0, this.messageList.length == 0 ? 0 : this.messageList.length - res.data.rows.length);
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 跳转消息详情页面
		toMessageDetails(item){
			uni.navigateTo({
				url:'./message-details?messageId=' + item.messageId,
			})
		}
		
	}
};
</script>

<style>
page {
	background-color: #f3f3f3;
}
</style>
<style scoped lang="scss">
.j-message {
	padding: 0 25rpx;
}

.j-message-row {
	margin-top: 20rpx;
	border-radius: 14rpx;
	padding: 30rpx 20rpx;
	background-color: #ffffff;

	.j-message-title {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.title {
			position: relative;
			display: flex;
			align-items: center;

			.text {
				font-size: 30rpx;
				margin-left: 10rpx;
				max-width: 330rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.j-w-read {
				width: 12rpx;
				height: 12rpx;
				background-color: red;
				border-radius: 50%;
				position: absolute;
				top: -4rpx;
				left: 28rpx;
			}
		}

		.time {
			color: #909399;
			font-size: 26rpx;
		}
	}

	.j-message-content {
		color: #909399;
		margin-top: 20rpx;
	}
}
</style>
